<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="800px">
    <ContentWrap>
      <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
        <el-form-item label="客户编号" prop="customerNo">
          <el-input v-model="queryParams.customerNo" :clearable="true" />
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入名称" :clearable="true" />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleClickSearch">
            <Icon icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="handleClickReset">
            <Icon icon="ep:refresh" />
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <Table
        :columns="columns"
        :page-param="queryParams"
        :adaptive="true"
        :page-data="queryData"
        save-key="CustomerSelect"
        height-per="90"
        @page-change="getPage"
        @row-dblclick="handleTableDblclick"
      />
    </ContentWrap>
  </Dialog>
</template>
<script setup name="CustomerSelect" lang="ts">
import * as CustomerApi from '@/api/customer/customer'
import { SettingBusinessModuleEnum } from '@/utils/constants'
const dialogVisible = ref(false)
const dialogTitle = ref('选择客户')

import { getBussinessModule } from '@/views/setting/businessField/BusinessFieldUtil'
const queryFormRef = ref()
const queryParams = ref({
  customerNo: undefined,
  name: undefined,
  source: undefined,
  grade: undefined,
  stage: undefined,
  state: undefined,
  isRecycle: false,
  isFallPool: false
})
const queryData = ref()
let columns = ref<any[]>([
  {
    label: '客户编号',
    prop: 'customerNo',
    minWidth: '140'
  }
])

/** 打开弹窗 */
const open = async () => {
  dataInit()
  await getPage()
  dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const dataInit = async () => {
  columns.value = [
    {
      label: '客户编号',
      prop: 'customerNo',
      minWidth: '140'
    },
    {
      label: '名称',
      prop: 'name',
      minWidth: '240'
    },
    {
      label: '公司主图片',
      prop: 'mainImageUrl',
      slot: 'mainImageUrl',
      minWidth: '140'
    },
    {
      label: '地址',
      prop: 'address',
      minWidth: '240'
    },

    {
      label: '所属人',
      prop: 'owner.nickname',
      minWidth: '240'
    },

    {
      label: '所属部门',
      prop: 'dept.name',
      minWidth: '240'
    },
    {
      label: '国家',
      prop: 'country.name',
      minWidth: '240'
    },
    {
      label: '上次跟进时间',
      prop: 'lastFollowTime',
      minWidth: '240'
    },
    {
      label: '上次发邮件时间',
      prop: 'lastSendMailTime',
      minWidth: '240'
    }
  ]
  // 加载业务字段
  const customerModuleField = await getBussinessModule(SettingBusinessModuleEnum.CUSTOMER)

  customerModuleField.immutableFields.forEach((item) => {
    columns.value.push({
      label: item.showName,
      prop: item.fieldName,
      formatter: (row) =>
        row[item.fieldName] == 0
          ? ''
          : item.options.find((obj) => obj.id === row[item.fieldName])?.name
    })
  })
  customerModuleField.customFields.forEach((item) => {
    columns.value.push({
      label: item.showName,
      prop: item.fieldName
    })
  })

  const contactModuleField = await getBussinessModule(SettingBusinessModuleEnum.CUSTOMER_CONTACT)
  contactModuleField.immutableFields.forEach((item) => {
    columns.value.push({
      label: '主联系人' + item.showName,
      prop: 'mainContact.' + item.fieldName,

      formatter: (row) =>
        row['mainContact'][item.fieldName] == 0
          ? ''
          : item.options.find((obj) => obj.id === row['mainContact'][item.fieldName])?.name
    })
  })

  contactModuleField.customFields.forEach((item) => {
    columns.value.push({
      label: '主联系人' + item.showName,
      prop: 'mainContact.' + item.fieldName
    })
  })

  columns.value = columns.value.concat([
    {
      label: '创建时间',
      prop: 'createTime'
    },
    {
      label: '上次修改时间',
      prop: 'updateTime'
    }
  ])
}

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await CustomerApi.pageQuery(queryParams.value)
}

const emit = defineEmits(['rowDblclick'])
/** 处理table行双击事件 */
const handleTableDblclick = (row) => {
  emit('rowDblclick', row)
  close()
}

/** 关闭弹窗 */
const close = async () => {
  dialogVisible.value = false
}
</script>
